import React, { useState } from 'react';
import { 
  ChevronLeft, 
  ChevronRight, 
  Upload, 
  BookOpen, 
  FileText 
} from 'lucide-react';
import { uploadProductMaterial, uploadMethodologyMaterial, uploadScriptCaseMaterial, uploadCompleteScriptMaterial } from '../../services/api';
import UploadModal from '../modals/UploadModal';

interface SidebarProps {
  isOpen: boolean;
  onToggle: () => void;
  userId: number;
}

const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, userId }) => {
  const [showProductModal, setShowProductModal] = useState(false);
  const [showMethodologyModal, setShowMethodologyModal] = useState(false);
  const [showScriptCaseModal, setShowScriptCaseModal] = useState(false);
  const [showCompleteScriptModal, setShowCompleteScriptModal] = useState(false);

  const handleProductUpload = (file: File, kbId?: number) => {
    if (!kbId) return;

    uploadProductMaterial(userId, kbId, file)
      .then(() => {
        setShowProductModal(false);
      })
      .catch((error) => {
        console.error('Error uploading product material:', error);
      });
  };

  const handleMethodologyUpload = async (file: File) => {
    try {
      await uploadMethodologyMaterial(userId, file);
      setShowMethodologyModal(false);
    } catch (error) {
      console.error('Error uploading methodology material:', error);
    }
  };

  const handleScriptCaseUpload = async (file: File) => {
    try {
      await uploadScriptCaseMaterial(userId, file);
      setShowScriptCaseModal(false);
    } catch (error) {
      console.error('Error uploading script case material:', error);
    }
  };

  const handleCompleteScriptUpload = async (file: File) => {
    try {
      await uploadCompleteScriptMaterial(userId, file);
      setShowCompleteScriptModal(false);
    } catch (error) {
      console.error('Error uploading complete script material:', error);
    }
  };

  return (
    <>
      <div
        className={`h-screen transition-all duration-300 relative ${
          isOpen ? 'w-64' : 'w-20'
        }`}
        style={{
          background: '#F5F1E4',
          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)'
        }}
      >
        {/* Drawer handle */}
        <div className="absolute -right-3 top-20 z-10">
          <button
            onClick={onToggle}
            className="bg-ink-red text-paper w-6 h-16 rounded-r-lg flex items-center justify-center shadow-light hover:bg-ink-red/90 transition-all duration-200"
          >
            {isOpen ? <ChevronLeft size={16} /> : <ChevronRight size={16} />}
          </button>
        </div>

        {/* Sidebar header */}
        <div className="pt-6 pb-4 px-4 text-center border-b border-ink/10">
          <h2 className={`font-montserrat text-ink transition-opacity duration-200 ${isOpen ? 'opacity-100' : 'opacity-0'}`}>
            话术工作室
          </h2>
        </div>

        {/* Sidebar content */}
        <div className="px-4 py-2 space-y-4">
          {/* Product materials */}
          <div className={`transition-all duration-200 ${isOpen ? 'mb-4' : 'mb-6'}`}>
            <button
              onClick={() => setShowProductModal(true)}
              className={`flex items-center p-3 rounded-lg bg-paper hover:bg-ink/5 w-full text-ink transition-all duration-200 ${
                isOpen ? 'justify-start' : 'justify-center'
              }`}
            >
              <div className="bg-ink-blue/10 p-2 rounded-lg">
                <Upload size={isOpen ? 20 : 24} className="text-ink-blue" />
              </div>
              {isOpen && (
                <span className="ml-3 font-inter text-body">上传产品资料</span>
              )}
            </button>
          </div>

          {/* Methodology materials */}
          <div className={`transition-all duration-200 ${isOpen ? 'mb-4' : 'mb-6'}`}>
            <button
              onClick={() => setShowMethodologyModal(true)}
              className={`flex items-center p-3 rounded-lg bg-paper hover:bg-ink/5 w-full text-ink transition-all duration-200 ${
                isOpen ? 'justify-start' : 'justify-center'
              }`}
            >
              <div className="bg-ink-green/10 p-2 rounded-lg">
                <BookOpen size={isOpen ? 20 : 24} className="text-ink-green" />
              </div>
              {isOpen && (
                <span className="ml-3 font-inter text-body">上传方法论资料</span>
              )}
            </button>
          </div>

          {/* Script case materials */}
          <div className={`transition-all duration-200`}>
            <button
              onClick={() => setShowScriptCaseModal(true)}
              className={`flex items-center p-3 rounded-lg bg-paper hover:bg-ink/5 w-full text-ink transition-all duration-200 ${
                isOpen ? 'justify-start' : 'justify-center'
              }`}
            >
              <div className="bg-ink-red/10 p-2 rounded-lg">
                <FileText size={isOpen ? 20 : 24} className="text-ink-red" />
              </div>
              {isOpen && (
                <span className="ml-3 font-inter text-body">上传话术案例资料</span>
              )}
            </button>
          </div>

          {/* Complete script materials */}
          <div className={`transition-all duration-200`}>
            <button
              onClick={() => setShowCompleteScriptModal(true)}
              className={`flex items-center p-3 rounded-lg bg-paper hover:bg-ink/5 w-full text-ink transition-all duration-200 ${
                isOpen ? 'justify-start' : 'justify-center'
              }`}
            >
              <div className="bg-ink-blue/10 p-2 rounded-lg">
                <Upload size={isOpen ? 20 : 24} className="text-ink-blue" />
              </div>
              {isOpen && (
                <span className="ml-3 font-inter text-body">上传完整话术</span>
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Upload Modals */}
      <UploadModal
        isOpen={showCompleteScriptModal}
        onClose={() => setShowCompleteScriptModal(false)}
        title="上传完整话术"
        onUpload={handleScriptCaseUpload}
      />

      <UploadModal
        isOpen={showCompleteScriptModal}
        onClose={() => setShowCompleteScriptModal(false)}
        title="上传完整话术"
        onUpload={handleCompleteScriptUpload}
      />
      <UploadModal
        isOpen={showProductModal}
        onClose={() => setShowProductModal(false)}
        title="上传产品资料"
        onUpload={handleProductUpload}
        showKbId={true}
        showDescription={false}
      />

      <UploadModal
        isOpen={showMethodologyModal}
        onClose={() => setShowMethodologyModal(false)}
        title="上传方法论资料"
        onUpload={handleMethodologyUpload}
      />

      <UploadModal
        isOpen={showScriptCaseModal}
        onClose={() => setShowScriptCaseModal(false)}
        title="上传话术案例资料"
        onUpload={handleScriptCaseUpload}
      />

      <UploadModal
        isOpen={showCompleteScriptModal}
        onClose={() => setShowCompleteScriptModal(false)}
        title="上传完整话术"
        onUpload={handleCompleteScriptUpload}
      />
    </>
  );
};

export default Sidebar;
